<template>
    <el-dialog v-model="isVisible" title="模板列表" width="918px">
      <div class="template-list">
        <div
          v-for="(template, index) in templateList"
          :key="index"
          class="template-item"
        >
          <div class="thumbnail">缩略图</div>
          <div class="template-name">XXXXXX模板</div>
        </div>
      </div>
      <template #footer>
        <el-button @click="closePopup">取消</el-button>
        <el-button type="primary" @click="confirmPopup">确认</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  // 模板列表数据
  const templateList = ref([
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    },
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    },
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    },
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    },
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    },
    {
      name: 'XXXXXX模板',
      thumbnail: ''
    }
  ]);
  
  // 弹窗是否可见
  const isVisible = ref(false);
  
  // 关闭弹窗方法
  const closePopup = () => {
    isVisible.value = false;
  };
  
  // 确认弹窗方法
  const confirmPopup = () => {
    console.log('确认选择模板');
    closePopup();
  };
  
  // 暴露打开弹窗的方法，供外部调用
  const openPopup = () => {
    isVisible.value = true;
  };
  
  // 导出 openPopup 方法，以便在其他组件中调用打开弹窗
  defineExpose({
    openPopup
  });
  </script>
  
  <style scoped>
  .template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .template-item {
    width: 250px;
    border: 1px solid #e4e7ed;
    padding: 16px;
  }
  
  .thumbnail {
    height: 150px;
    border: 1px solid #e4e7ed;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .template-name {
    text-align: center;
  }
  </style>